<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<div th:include="include :: header"></div>
<script type="text/javascript" src="/js/face/liveplayer-element.min.js"></script>
<script>  
 	videojs.options.flash.swf = "/js/face/liveplayer.swf";
</script>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content" style="width:50%;margin: auto;text-align: center;" >
					<h1>视频源</h1>
					<live-player id="player01"  resolution="sd"
						th:video-url="${url}" live="true"
						stretch="true"  autoplay="true" ></live-player> 
					<button class="layui-btn" style="width:100%;" onclick="getSnap();" >获取快照</button>
                </div> 
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript" src="/js/video/add.js"></script>
</body>
<script type="text/javascript">
	var snapImg; 
 	var getSnap = function(){
 		var player = document.getElementById('player01');
 		player.addEventListener('snapOutside', evt => {
 			//console.log(evt);
 			console.log(evt.detail[0].length);
 			dealImage(evt.detail[0],50,50, useImg);
 			layer.msg("获取成功"); 
 		});
 		player.getVueInstance().snap();
 	}   
 	 
 	var callbackdata = function(){  
        return snapImg;
    }
</script>
<script type="text/javascript">
//然后一压 再打个桩看下长度 方法名随便起怎么舒服怎么来
function useImg(base64) {
	 console.log(base64.length);
	 snapImg = base64;
}
 

</script>
</script>
</html>
